<template>
	<div class="main" v-if="newsongs">
		<rcomdTl></rcomdTl>
		<div class="remd_songs">
			<div class="remd_ul">
				<router-link :to="'/playlist?id='+item.id" class="remd_li" v-for="item in recommends" :key="item.id">
					<div class="remd_img">
						<baseImage :picUrl="item.picUrl" class="u-img"></baseImage>
						<baseEarp :earp="item.playCount" class="remd_lnum"></baseEarp>
					</div>
					<div class="remd_text">{{item.name}}</div>
				</router-link>
			</div>
		</div>
		<rcomdTl text="最新音乐"></rcomdTl>

		<div v-for="item in newsongs" :key="item.id" class="remd_newsg f-bd" :dataIndex="item.id">
			<router-link :to="'/song?id='+item.id">
				<songlist :songname="item.name" :album="item.song.album.name" :singer="addArt(item.song.artists)">
					<icon></icon>
				</songlist>
			</router-link>

		</div>
	</div>
</template>

<script>
	import rcomdTl from "@/components/home/rcomd_tl.vue";
	import baseImage from "@/components/base/image.vue";
	import baseEarp from "@/components/base/earup.vue";
	// import remdData from "@/mock/remd.js";
	import api from "@/config/api.js";
	import songlist from "@/components/base/songlist.vue";
	import icon from "@/components/base/icon.vue";

	export default {
		data() {
			return {
				// remd: remdData,
				newsongs: "",
				dataIndex: "",
				recommends: ''
			}
		},
		mounted() {
			// 获取每日最新歌单
			this.$axios.get(api.recommend)
				.then(result => {
					// console.log(result)
					this.recommends = result.data.result
					// this.dataIndex = res.data.result.id
				}),
				// 获取最新音乐
				this.$axios.get(api.newsong)
				.then(res => {
					this.newsongs = res.data.result
					this.dataIndex = res.data.result.id
				})
		},
		components: {
			rcomdTl,
			baseImage,
			baseEarp,
			songlist,
			icon
		},
		methods: {
			addArt(arts) {
				let art = Array.isArray(arts) ? arts : [];
				let tmp = [];
				art.forEach(el => {
					tmp.push(el.name)
				})
				return tmp.join('/')
			}
			// 双击播放歌曲事件,接收传过来的id
			// playMusic(id) {
			//获取歌曲的url
			// this.$axios.get(`https://music.163.com/song/media/outer/url?id=${this.dataIndex}.mp3`)

			// .then(res => {
			// console.log(res);
			//将结果添加到musicList中
			// this.songUrl = response.body.data[0].url;
			// });

		}
	}
</script>

<style lang="scss" scoped>
	a {
		text-decoration: none;
		color: #333;
	}

	.main {
		overflow: hidden;
	}

	.remd_songs {
		position: relative;

		&::after {
			content: "";
			display: block;
			clear: both;
		}
	}

	.remd_li {
		margin-bottom: 16px;
		width: 33.3%;
		// display: inline-block;
		float: left;
		padding-left: 1px;
		padding-right: 1px;
		box-sizing: border-box;
	}
	
	
	.remd_ul{
		display: flex;
		flex-wrap: wrap;
	}
	
	.remd_ul::after{
		content: '';
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
		overflow: hidden;
	}
	.remd_img {
		position: relative;
		padding-bottom: 100%;

		>.u-img {
			position: absolute;
			width: 100%;
			left: 0;
			top: 0;
			z-index: 1;
		}
	}

	.remd_lnum {
		position: absolute;
		right: 5px;
		top: 2px;
		z-index: 3;
		padding-left: 13px;
		color: #fff;
		font-size: 12px;
		background-position: 0;
		background-repeat: no-repeat;
		background-size: 11px 10px;
		text-shadow: 1px 0 0 rgba(0, 0, 0, .15);
	}

	.remd_text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		padding: 6px 2px 0 6px;
		min-height: 30px;
		line-height: 1.2;
		font-size: 13px;
	}

	.remd_newsg {
		position: relative;
		min-height: 20px;
		padding-left: 10px;
	}

	.remd_newsg>p {
		font-size: 18px;
		margin-bottom: 0;
	}

	.remd_newsg>span {
		font-size: 14px;
		color: #888;
	}
</style>
